<template>
    <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border @cell-click="selections">
        <el-table-column prop="name" />
        <el-table-column prop="managerName" />
        <el-table-column prop="introduce" />
        <el-table-column prop="code" />
        <el-table-column prop="address">
            <template #default="scope">
                <el-dropdown>
                    <span class="el-dropdown-link">
                        操作
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="addObj()">添加</el-dropdown-item>
                            <el-dropdown-item @click="handleDelete(scope.$index, scope.row)">删除</el-dropdown-item>
                            <el-dropdown-item @click="handleEdit(scope.$index, scope.row)">编辑</el-dropdown-item>

                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </template>
        </el-table-column>
    </el-table>
    <!--   添加编辑弹框 -->
    <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
        <el-form :model="form">
            <el-form-item label="部门名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="部门编码" :label-width="formLabelWidth">
                <el-input v-model="form.code" autocomplete="off" />
            </el-form-item>

            <el-form-item label="部门负责人" :label-width="formLabelWidth">
                <el-select v-model="form.managerId">
                    <el-option v-for="item in fze" :key="item.id" :label="item.username" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="部门介绍" :label-width="formLabelWidth">
                <el-input v-model="form.introduce" autocomplete="off" />
            </el-form-item>


        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">Cancel</el-button>
                <el-button type="primary" @click="typeset">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { getdept, getdepts, deldept, adddept, editdept } from '@/ulist/url';
import { onMounted, ref, reactive, unref } from 'vue'
import { ElMessageBox, ElMessage, ClickOutside as vClickOutside } from 'element-plus'
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const fze = ref<any>([]);
let form = ref<any>({
    name: '',//部门名称
    code: "",//部门编码
    introduce: "",//部门介绍
    managerId: "",//*部门负责人名字
    pid: ""//*部门父级部门id
})
const tableData = ref<any>([])

const selections = (row: any) => {
    form.value = { ...form.value, pid: row.id }
}
// let caozuoObj: any = ref<any>([])
let addObj = () => {
    dialogFormVisible.value = true
}
const typeos = (data: any[], pid = 0) => {
    const arr: any = []
    data.forEach((item: any) => {
        if (item.pid == pid) {
            const children = typeos(data, item.id)
            if (children.length) {

                item.children = children
            }
            arr.push(item)
        }
    })
    return arr

}
const getData = async () => {
    try {
        const res = await getdepts()
        console.log(res);

        // console.log(res.data.data[0])
        if (res.data.code == 10000) {
            tableData.value = typeos(res.data.data)
        }

    } catch (error) {
        console.log("error", error)
    }


}

const handleEdit = (index: number, row: any) => {
    dialogFormVisible.value = true
    form.value.name = row.name//部门名称
    form.value.managerId = row.managerId//*部门负责人名字
    form.value.code = row.code//部门编码
    form.value.introduce = row.introduce//部门介绍
    form.value.pid = row.pid//*部门父级部门id
    form.value.id = row.id
}
// 删除
const handleDelete = (index: number, row: any) => {
    ElMessageBox.confirm(
        `是否删除${row.name}`,
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            deldept(row.id).then(res => {
                console.log(res)
                if (res.data.code == 10000) {
                    getData()
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已经取消',
            })
        })
}

const typeset = async () => {
    if (form.value.id) {
        await editdept(form.value.id, form.value)
        dialogFormVisible.value = false
        getData()
    } else {
        await adddept(form.value)
        dialogFormVisible.value = false
        getData()
    }

}

const fzeList = async () => {
    try {
        const res = await getdept()
        console.log(res);

        if (res.data.code == 10000) {
            fze.value = res.data.data
        }

    } catch (error) {
        console.log("error", error)
    }
}
onMounted(() => {
    getData()
    fzeList()
})



</script>

<style scoped>
.tree {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.custom-tree-node-right {
    float: right;

}
</style>
